import React from "react";
import { LocationFill } from "antd-mobile-icons";
import styles from "../css/city.module.css";
import { Grid, IndexBar, List } from "antd-mobile";
import { useLoaderData, useParams } from "react-router-dom";
function City(props) {
  const { citywz, hotCities, cityList } = useLoaderData();
  const params=useParams()
  return (
    <div>
      <div className={styles.city}>
        <span>地理位置</span>
        <LocationFill style={{ color: "skyblue" }} />
        <span onClick={()=>props.saveCity(params.type,citywz)}>{citywz}</span>
      </div>
      <div>
        <span>热门城市</span>
        <Grid columns={3} gap={8}>
          {hotCities.map((item, i) => {
            return (
              <Grid.Item key={i}>
                <div className={styles["grid-demo-item-block"]} onClick={()=>props.saveCity(params.type,item.name)}>{item.name}</div>
              </Grid.Item>
            );
          })}
        </Grid>
      </div>
      <div >
      <IndexBar style={{ height: window.innerHeight }}>
        {cityList.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
            //   title={`标题${title}`}
              key={``}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item key={index} onClick={()=>props.saveCity(params.type,item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  );
}

export default City;
